import React from 'react'
import './ArticleItem.scss'
import Image from '../Image'
import IconFont from '../IconFont/IconFont'
import moment from 'moment'

export default function ArticleItem(props) {
  const { _id, cover, title, description, category, publishDate, views, comments } = props
  return (
    <div className='article-item default-hover' onClick={() => {
      props.onClick ? props.onClick() : window.open(`/article/${_id}`)
    }}>
      <div className='img-box'>
        <Image className='img' src={cover || category.icon}></Image>
      </div>
      <div className='info'>
        <div className='title line-clamp'>{title}</div>
        <div className='description two-line-clamp'>
          {description}
        </div>
        <div className='bottom'>
          <div className='left'>
            <div className='category item'>
              <IconFont type='icon-biji' style={{fontSize: '15px', marginRight: '2px'}}></IconFont>
              <span>{category.name}</span>
            </div>
            <div className='date item'>
              <IconFont type='icon-shijian' style={{fontSize: '15px', marginRight: '2px'}}></IconFont>
              <span>{moment(publishDate).format('YYYY-MM-DD')}</span>
            </div>
          </div>
          <div className='right'>
            <div className='views item'>
              <IconFont type='icon-liulan-copy' style={{fontSize: '30px'}}></IconFont>
              <span>{views}</span>
            </div>
            <div className='comments item'>
              <IconFont type='icon-pinglun' style={{fontSize: '15px'}}></IconFont>
              <span style={{marginLeft: '4px'}}>{comments}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
